<template>
  <a-modal
    title="人员列表"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
      <a-col :md="24" :sm="24" id="selectArea">
        <a-card :bordered="false">
          报销单号：
          <a-input
            :style="{width:'200px',marginBottom:'15px'}"
            placeholder="请输入报销单号"
            v-model="queryParam.reimbursementCode"></a-input>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报销单状态：
          <j-dict-select-tag
            :style="{width:'200px',marginBottom:'15px'}"
            v-model="queryParam.reimbursementState"
            placeholder="请选择"
            dictCode="reimbursement_state"
          />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;填写部门人：
          <a-select
            :style="{width:'200px',marginBottom:'15px'}"
            v-model="queryParam.departId"
            placeholder="请选择填写人部门"
            optionFilterProp="children"
            :filterOption="filterOption"
            showSearch
          >
            <a-select-option :key="item.id" v-for="item in departmentList">{{ item.depart_name }}</a-select-option>
          </a-select>
          <br>
          填写人：
          <a-input
            :style="{width:'185px',marginBottom:'15px'}"
            placeholder="请输入填写人"
            v-model="queryParam.realname"></a-input>
          <a-button @click="onSearch" style="margin-left: 40px" icon="search" size="small">查询</a-button>
          <a-button @click="searchReset(1)" style="margin:0 20px" icon="redo" size="small">重置</a-button>
          <!--用户列表-->
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{type:'radio',selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange"
          >

        <span     slot="contractPeriod" slot-scope="text, record" >
                <span v-for="item in contractPeriodList " v-if="record.contractPeriod==item.value">{{item.text}} </span>

            </span>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

  </a-modal>
</template>
<script>
  import { getUserList } from '@/api/api'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { filterObj } from '@/utils/util'
  import { getAction } from '../../../api/manage'
  import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
  export default {
    name: 'JSelectExpenseReportModal',
    mixins: [JeecgListMixin],
    data() {
      return {
        visible: false,
        model: {},
        confirmLoading: false,
        title: '选择报销单',
        queryParam: {
          reimbursementCode: '',
          reimbursementState: '',
          departId: '',
          realname: ''
        },
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '报销单号',
            align: 'center',
            dataIndex: 'reimbursementCode'
          },
          {
            title: '报销单类型',
            align: 'center',
            dataIndex: 'reimbursementType_dictText'
          },
          {
            title: '填写时间',
            align: 'center',
            dataIndex: 'reimbursementTime',
            scopedSlots: {customRender: 'reimbursementTime'}
          },
          {
            title: '报销单状态',
            align: 'center',
            // dataIndex: 'reimbursementState_dictText'
            scopedSlots: {customRender: 'reimbursementState_dictText'}
          },
          {
            title: '项目号/部门编码',
            align: 'center',
            dataIndex: 'projectCode'
          },
          {
            title: '项目简称/部门名称',
            align: 'center',
            dataIndex: 'projectName',
            scopedSlots: {customRender: 'projectName'}
          },
          {
            title: '报销单金额',
            align: 'center',
            dataIndex: 'reimbursementTotalMoney'
          },
          {
            title: '填写人',
            align: 'center',
            dataIndex: 'realname'
          },
          {
            title: '所属部门',
            align: 'center',
            dataIndex: 'departName'
          },
          {
            title: '付款日期',
            align: 'center',
            dataIndex: 'dateOfPayment'
          },
          {
            title: '审批状态',
            align: 'center',
            dataIndex: 'reimbursementState_dictText',
            // scopedSlots: {customRender: 'bpmStatus_dictText'}
          },
        ],
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          list: '/reimbursement/reimbursement/list'
        },
        departmentList:[]
      }
    },
    created() {
      this.initDictConfig()
    },
    methods: {
      initDictConfig() {
        getAction('/reimbursement/reimbursement/getDepart', {}).then(res => {
          if (res.success) {
            this.departmentList = res.result
          }
        })
      },
      loadData() {
        this.loading = true;
        let params = this.getQueryParams();//查询条件
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if(isNaN(pagination.pageSize)){
          pagination.pageSize = Number(pagination.pageSizeOptions[0])
        }
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData()
      },
      open() {
        this.visible = true
        //Step.1 清空选中用户
        this.ipagination.current = 1
        this.dataSource = []
        this.selectedRowKeys = []
        this.selectedRows = []
        //Step.2 加载用户数据
        this.loadData()
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      handleCancel() {
        this.close()
      },
      handleSubmit() {
        if (this.selectedRowKeys.length < 1) {
          this.$message.error('请选择一条数据!')
          return
        }
        this.$emit('submit', this.selectionRows[0])
        this.close()
      },
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
        param.onJobState=this.onJobState
        return filterObj(param)
      },
      getQueryField() {
        let str = 'id,'
        for (let a = 0; a < this.columns.length; a++) {
          str += ',' + this.columns[a].dataIndex
        }
        return str
      },
      onSearch() {
        this.loadData(1)
      },
      searchReset(num) {
        let that = this
        if (num !== 0) {
          that.queryParam = {}
          that.loadData(1)
        }
        that.selectedRowKeys = []
        that.sendData = []
        that.selectedKeys = []
      },
      close() {
        this.searchReset(0)
        this.visible = false
        this.queryParam = {}
      }
    }
  }
</script>